<template>
    <div class="weather-banner">
        <div class="weather-banner-text">
            <p class="r1">&nbsp;{{ parseInt(sk_t) }}℃</p>
            <p class="r2">蓬江区</p>
            <p class="r3">{{ sk_s }}</p>
        </div>
    </div>
</template>

<script>
// {unescape:1,version:v61,appid:83986934,appsecret:LeC4URB2}
//import { getWeatherAPI } from "@/api/getWeatherAPI";
import request from '@/utils/request2'
export default {
    data() {
        return {
            weather: null,
            weatherRes: {},
            sk_t: 0, sk_s: ''
        }
    },
    methods: {
        async setWeather() {
            // const { data: res } = await getWeatherAPI('', { unescape: 1, version: 'v61', appid: 83986934, appsecret: 'LeC4URB2', city: '江门' })
            // this.weather = res;
            var res2 = await request({ 'url': 'http://pjyj.qt.xingfeng666.cn:9100/getWeatherData?productType=CURRENT_WEATHER&code=440700' });
            this.weatherRes = JSON.parse(res2);
            this.sk_t = this.weatherRes[0].sk_t;
            this.sk_s = this.weatherRes[0].sk_s;
        }
    },
    computed: {
        temperature() {
            if (!(this.$store.state.weather_msg?.daily)) {
                return;
            }
            return this.$store.state.weather_msg.daily.temperature[0].avg.toFixed(0)
        }
    },
    mounted() {
        this.setWeather();
        // this.$store.dispatch('getPrecipitation')
    }
}
</script>

<style scoped>
.weather-banner:before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.3;
}

.weather-banner {
    background: url('@/assets/home/header.jpg') no-repeat;
    background-size: cover;
    background-size: cover;
    height: 60vw;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
}

.title-group.title-boreder-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.weather-banner-text {
    color: white;
    z-index: 99;
    font-size: 2em;
}

.weather-banner-text p {
    margin: 8px 0;
}

.weather-banner-text .r1 {
    font-size: 2em;
}
</style>
 